<template>
	<div class="notice">
		<img :src="icon" alt="通知" />
		<div class="txt-box">
			<div class="txt" v-for="(item, index) in noticeData">
				<span>{{ item.activityDescription }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, nextTick, onBeforeUpdate } from 'vue';
const props = defineProps({
	noticeData: String
});

const icon = require('./assets/mall-icon-notice@3x.png');
const timer = null;
const amount = 10; //偏移的单位: px
const speed = 120; //偏移的速度: 毫秒
const onlyKey = null;

const init = () => {
	let txtBox = document.querySelector('.txt-box');
	let txt = document.querySelector('.txt');
	let txtWidth = txt.clientWidth;

	if (txt.clientWidth > txtBox.clientWidth) {
		loop();
	}

	function loop() {
		let distance = 0;
		let timer = setInterval(() => {
			if (distance <= -txtWidth) {
				distance = txtBox.clientWidth;
			} else {
				distance -= amount;
			}
			txt.style.transform = 'translateX(' + distance + 'px)';
		}, speed);
		timer = timer;
	}
};

nextTick(() => {
	init();
});
</script>

<style lang="scss" scoped>
@import '@mall/assets/css/common';

.notice {
	height: rem(48);
	display: flex;
	align-items: center;
	padding: 0 rem(20);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: $tc;
	img {
		width: rem(36);
		margin: 0 rem(15) 0 0;
	}

	.txt-box {
		flex: 1;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.txt {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			span {
				font-size: rem(28);
				color: #ffffff;
				font-weight: 400;
				white-space: nowrap;
				padding: 0 rem(60) 0 0;

				&:last-child {
					padding: 0;
				}
			}
		}
	}
}
</style>
